/* 
  学习目标：useEffect 练习
  1. 在组件挂载时，监听窗口改变事件
  2. 在组件卸载时，移除监听的窗口改变事件
*/
import React, { useState, useEffect } from 'react';

export default function App() {
  // 准备组件的显示与隐藏
  const [isShow, setIsShow] = useState(true);

  return (
    <div>
      {isShow && <Child></Child>}
      <button onClick={() => setIsShow(!isShow)}>点击卸载子组件</button>
    </div>
  );
}

function Child() {
  const resizeFn = () => {
    console.log('窗口改变了');
  };

  // 1. 在组件挂载后，监听窗口改变事件
  useEffect(() => {
    console.log('组件挂载完成');
    window.addEventListener('resize', resizeFn);
  }, []);

  // 2. 在组件卸载时，移除监听的窗口改变事件
  useEffect(() => {
    return () => {
      window.removeEventListener('resize', resizeFn);
    };
  }, []);

  return <div>我是子组件</div>;
}
